import { useRequest } from '@umijs/hooks';
import { getyjStatistic, getyqStatistic } from '@/services/zhirong/dataIntegration';
import { useState } from 'react';
import { Bar, Pie } from '@ant-design/charts';
import ProCard from '@ant-design/pro-card';

const Charts = () => {
  const [bar, setBar] = useState([]);
  const { loading: loadingBar } = useRequest(getyjStatistic, {
    onSuccess: (res) => {
      setBar(res.data);
    },
  });
  const [pie, setPie] = useState();
  const { loading: loadingPie } = useRequest(getyqStatistic, {
    onSuccess: (res) => {
      setPie(res.data);
    },
  });
  return (
    <>
      {bar && pie && (
        <ProCard direction="row" gutter={8} ghost>
          {/* 条形图 */}
          <ProCard
            style={{ borderRadius: '8px', height: '24em', marginBottom: '0.5em' }}
            title={<b>主题分布</b>}
          // loading={loadingBar}
          >
            <Bar
              data={bar}
              loading={loadingBar}
              xField="value"
              yField="type"
              xAxis={{
                label: {
                  autoHide: true,
                  autoRotate: false,
                },
              }}
              meta={{ type: '预警词', value: '数量' }}
              color="#722ED1"
              barWidthRatio={0.6}
            ></Bar>
          </ProCard>
          {/* 饼状图 */}
          <ProCard style={{ borderRadius: '8px', height: '24em', width: "24em" }} title={<b>数据来源</b>}
          // loading={loadingPie}
          >
            <Pie
              data={pie}
              loading={loadingPie}
              angleField="value"
              colorField="type"
              color={['#D3ADF7', '#B37FEB', '#9254DE', '#531DAB']}
            ></Pie>
          </ProCard>
        </ProCard>
      )}
    </>
  );
};

export default Charts;
